<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->

    <!-- <script src="1.双向数据绑定.js"></script> -->
    <!-- <script src="./2.eventBus.js"></script> -->
    <style>
        p{
            font-size: 20px;
            line-height: 1;
            white-space: normal;
        }
    </style>
</head>

<body>
    <div id="app" >
        <div class="box1"></div>
        <p>sdksd 我很开心，今年一定会是一个好年good       good year! tomorrot will 
            be better i am so glad my dream will come true 
            i will 
            achieve my goal. Everyone's effort will be paid with what they want kakaka akak akska kaska aksa s </p>
        
        <input type="text" v-model="message">

    </div>

</body>
<script>
    // console.log(document.querySelector("#app"))
    /* var app = new Vue({
        el: '#app',
        data: {
            message: {
                a: 11,
                b: 12
            },
            name: "xioaming"
        },
        watch: {
            manyChange: {
                handler:function(n,o){
                    console.log("watch", n,o)
                },
                deep: true
            },
            messageCom: {
                handler: function(n,o){
                    console.log("get old value", n,o)
                },
                deep: true
            }


        },
        methods: {
            change() {
                this.message.a = "world"
                console.log("change", this.message)
            },
            aa(n,o){
                console.log("i am change",n,o)
                this.name = "xiaohong"
            }
        },
        computed: {
            manyChange(){
                const {name, message} = this
                return {name, message}
            },
            messageCom(){
                return JSON.parse(JSON.stringify(this.message))
            }
        }
    }) */
</script>
<!-- <script src="000.js"></script> -->
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background: pink;
    }
</style>

</html>